<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="//static.xinhuaapp.com/css/datetimepicker.min.css">
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=1510195133000">
</head>
<body class="pz-contain">
<h2>搜索表单</h2>
<hr class="fn-mt10">
<div class="pz-form pz-searchform fn-clear fn-mt20">
  <form id="j-searchform">
  <div class="row">
    <div class="row-content" data-field="starttime"></div>
  </div>
  <div class="row">
    <div class="row-content" data-field="endtime"></div>
  </div>
  <div class="row">
    <div class="row-content" data-field="state"></div>
  </div>
  <div class="row">
    <div class="row-content" data-field="keyword"></div>
  </div>
  <div class="actions">
    <input type="submit" class="pz-btn btn-warn pz-icon" value="&#xe6ad;">
  </div>
  </form>
</div>
<h2 class="fn-mt20">表单</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20 fn-rate60">
  <em class="icon pz-icon icon-survey1"></em>
  <span class="title">单列表单</span>
</div>
<div class="pz-boxbody fn-rate60">
  <div class="pz-form">
    <form id="j-form1">
    <div class="wrap fn-pd20">
      <div class="row row80">
        <div class="row-title">姓名</div>
        <div class="row-content" data-field="uname"></div>
      </div>
      <div class="row row80">
        <div class="row-title">性别</div>
        <div class="row-content" data-field="sex"></div>
      </div>
      <div class="row row80">
        <div class="row-title">兴趣爱好</div>
        <div class="row-content" data-field="like"></div>
      </div>
      <div class="row row80">
        <div class="row-title">最擅长</div>
        <div class="row-content" data-field="best"></div>
      </div>
      <div class="row row80">
        <div class="row-title">其他</div>
        <div class="row-content" data-field="other"></div>
      </div>
    </div>
    <div class="actions fn-pd20">
      <input type="submit" class="pz-btn btn-success btn-big" value="提交">
    </div>
    </form>
  </div>
</div>
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-survey1"></em>
  <span class="title">双列表单</span>
</div>
<div class="pz-boxbody">
  <div class="pz-form">
    <form id="j-form2">
    <div class="wrap fn-pd10 fn-clear">
      <div class="group2 fn-pd10">
        <div class="row row80">
          <div class="row-title">姓名</div>
          <div class="row-content" data-field="uname"></div>
        </div>
        <div class="row row80">
          <div class="row-title">兴趣爱好</div>
          <div class="row-content" data-field="like"></div>
        </div>
        <div class="row row80">
          <div class="row-title">其他</div>
          <div class="row-content" data-field="other"></div>
        </div>
      </div>
      <div class="group2 fn-pd10">
        <div class="row row80">
          <div class="row-title">性别</div>
          <div class="row-content" data-field="sex"></div>
        </div>
        <div class="row row80">
          <div class="row-title">最擅长</div>
          <div class="row-content" data-field="best"></div>
        </div>
        <div class="row"></div>
      </div>
    </div>
    <div class="actions fn-pd20">
      <input type="submit" class="pz-btn btn-success btn-big" value="提交">
    </div>
    </form>
  </div>
</div>
<script src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
<script src="//static.xinhuaapp.com/js/datetimepicker.min.js"></script>
<script src="../pizza/js/pizza.js?_t=1510649614000"></script>
<script src="../pizza/js/pizzaform.js?_t=1509687675000"></script>
<script type="text/javascript">
// 渲染搜索表单
var newSearchTplform = new pizzaCmd.pizzaform('j-searchform', {
  "starttime": {
    "type": "text",
    "required": true,
    "placeholder": "开始时间"
  },
  "endtime": {
    "type": "text",
    "required": true,
    "placeholder": "结束时间"
  },
  "state": {
    "type": "select",
    "option": [
      {"text": "选择爱好", "value": "0"},
      {"text": "电影", "value": "1"},
      {"text": "音乐", "value": "2"},
      {"text": "运动", "value": "3"},
      {"text": "编码", "value": "4"}
    ]
  },
  "keyword": {
    "class": "fn-w180",
    "type": "text",
    "required": true,
    "placeholder": "关键词"
  }
});
newSearchTplform.render(function (formField) {
  formField['starttime']['fieldObj'].datetimepicker({
    timepicker: false,
    format: 'Y-m-d',
    onShow: function(){
      var endtime = formField['endtime']['fieldObj'].val();
      this.setOptions({
        maxDate: endtime?endtime:false
      });
    }
  });
  formField['endtime']['fieldObj'].datetimepicker({
    timepicker: false,
    format: 'Y-m-d',
    onShow: function(){
      var starttime = formField['starttime']['fieldObj'].val();
      this.setOptions({
        minDate: starttime?starttime:false
      });
    }
  });
}, function (result) {
  //console.log(result['data']);
  return false;
});

var fieldDict = {
  "uname": { // 姓名
    "type": "text",
    "class": "fn-rate40",
    "required": true,
    "minlength": 2,
    "maxlength": 4
  },
  "sex": { // 性别
    "type": "radio",
    "option": [
      {"text": "男", "value": "1"},
      {"text": "女", "value": "2"}
    ],
    "required": true
  },
  "like": { // 兴趣爱好
    "type": "checkbox",
    "option": [
      {"text": "电影", "value": "1"},
      {"text": "音乐", "value": "2"},
      {"text": "运动", "value": "3"},
      {"text": "编码", "value": "4"}
    ],
    "required": true
  },
  "best": { // 最擅长
    "type": "select",
    "option": [
      {"text": "电影", "value": "1"},
      {"text": "音乐", "value": "2"},
      {"text": "运动", "value": "3"},
      {"text": "编码", "value": "4"}
    ]
  },
  "other": { // 其他
    "type": "textarea",
    "class": "fn-rate80 fn-h100"
  }
};

// 渲染单列表单
var newTplform = new pizzaCmd.pizzaform('j-form1', fieldDict);
newTplform.render(function (formField) {
  // console.log(formField);
}, function (result) {
  //console.log(result);
  return false;
});

// 渲染双列表单
var newTplform2 = new pizzaCmd.pizzaform('j-form2', fieldDict);
newTplform2.render(function (formField) {
  // console.log(formField);
}, function (result) {
  //console.log(result);
  return false;
});
</script>
</body>
</html>